*{
  margin: 0;
  padding: 0;
}
.container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  //position: relative;
  #map{
    width: 76%;
    height: 815px;
    // outline: 1px solid red;
    transform: translateX(1%) translateY(8%);
  }
  .charts{
    width: 400px;
    height: 100%;
    padding-top: 70px;
    z-index: 1;
    // outline: 1px solid red;
    //position: absolute;
    //top: 40px;
    //right: 40px;
    .stationStatistics{
      width: 100%;
      height: 250px;
      background-image: url(~@/assets/img/chartbg.png);
      background-size: 100% 100%;
      margin-bottom: 30px;
      position: relative;
      .title{
        width: 86%;
        color: #19ECFF;
        font-size: 14px;
        margin-left: 30px;
        padding-top: 22px;
        padding-bottom: 10px;
        border-bottom: 1px solid #19ECFF;
        padding-left: 20px;
        position: relative;
        &::after{
          content: '';
          width: 6px;
          height: 16px;
          background-color: #19ECFF;
          position: absolute;
          top: 48%;
          left: 0%;
        }
      }
      .detail{
        width: 100%;
        height: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .quantity{
          width: 193px;
          height: 100%;
          padding-left: 20px;
          .station,.transformer{
            width: 100px;
            height: 54px;
            background-image: url(~@/assets/img/messagebg.png);
            background-size: 100% 100%;
            // background-image: radial-gradient(#000711,#012248,#034279);
            // padding-top: 4px;
            margin: 26px auto 0;
            text-align: center;
            // border: 1px solid #00C2FF;
            box-sizing: border-box;
            .num{
              font-size: 18px;
              font-family: 'DIN';
              color: #3AC9F5;
            }
            .name{
              font-size: 12px;
              color: #fff;
            }
          }
        }
        .error{
          width: 185px;
          height: 100%;
          position: relative;
          // outline: 1px solid green;
        }
        .circle{
          width: 160px;
          height: 160px;
          border-radius: 50%;
          border: 1px dashed #35ABEC;
          position: absolute;
          top: 7%;
          left: 54.5%;
          .errorNum{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #35ABEC;
            background: radial-gradient(#000509,#001D34,#002949,#004072);
            text-align: center;
            padding-top: 20px;
            margin: 30px auto 0;

            .text{
              color: #fff;
              font-size: 12px;
            }
            .num{
              font-family: 'DIN';
              color: #3AC9F5;
              font-size: 24px;
            }
            span{
              display: inline-block;
              color: #35ABEC;
            }
          }
        }
      }
    }
    .errorStatistics{
      width: 100%;
      height: 250px;
      background-image: url(~@/assets/img/chartbg.png);
      background-size: 100% 100%;
      margin-bottom: 30px;
      .title{
        width: 86%;
        color: #19ECFF;
        font-size: 14px;
        margin-left: 30px;
        padding-top: 22px;
        padding-bottom: 10px;
        border-bottom: 1px solid #19ECFF;
        padding-left: 20px;
        position: relative;
        &::after{
          content: '';
          width: 6px;
          height: 16px;
          background-color: #19ECFF;
          position: absolute;
          top: 48%;
          left: 0%;
        }
      }
      .line{
        width: 100%;
        height: 75%;
      }
    }
    .errorRank{
      width: 100%;
      height: 250px;
      background-image: url(~@/assets/img/chartbg.png);
      background-size: 100% 100%;
      .title{
        width: 86%;
        color: #19ECFF;
        font-size: 14px;
        margin-left: 30px;
        padding-top: 22px;
        padding-bottom: 10px;
        border-bottom: 1px solid #19ECFF;
        padding-left: 20px;
        position: relative;
        &::after{
          content: '';
          width: 6px;
          height: 16px;
          background-color: #19ECFF;
          position: absolute;
          top: 48%;
          left: 0%;
        }
      }
      .error{
        width: 100%;
        height: 45%;
        // outline: 1px solid red;
      }
      .rank{
        width: 100%;
        height: 26%;
        display: flex;
        justify-content: center;
        align-items: center;
        .rank1,.rank2{
          width: 45%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: left;
          text-align: center;
          padding-left: 10px;
        }
        .rank1{
          .errorName{
            width: 60px;
            height: 27px;
            line-height: 27px;
            font-size: 12px;
            color: #fff;
            border-bottom: 2px solid red;
            text-overflow: ellipsis;
            overflow: hidden;
            cursor: pointer;
          }
          .errorDetail{
            width: 80px;
            height: 50px;
            padding-top: 2px;
            background-color: red;
            margin-left: 20px;
            color: #fff;
            border-radius: 0 0 8px 0;
            position: relative;
            ::after{
              content: '';
              width: 2px;
              height: 50px;
              background-color: #fff;
              position: absolute;
              top: 0%;
              left: -10%;
            }
          }
        }
        .rank2{
          .errorName{
            width: 60px;
            height: 27px;
            line-height: 27px;
            font-size: 12px;
            color: #fff;
            border-bottom: 2px solid #E57722;
            text-overflow: ellipsis;
            overflow: hidden;
            cursor: pointer;
          }
          .errorDetail{
            width: 80px;
            height: 50px;
            padding-top: 2px;
            background-color: #E57722;
            margin-left: 20px;
            color: #fff;
            border-radius: 0 0 8px 0;
            position: relative;
            ::after{
              content: '';
              width: 2px;
              height: 50px;
              background-color: #fff;
              position: absolute;
              top: 0%;
              left: -10%;
            }
          }
        }
      }
    }
  }
  @media (max-width: 1280px ) {
    #map{
      transform: translateX(-4%) translateY(8%) scale(0.9);
    }
    .rank{
      .rank1,.rank2{
        .errorName{
          transform: scale(0.9);
        }
        .errorDetail{
          &::after{
            content: '';
            width: 2px;
            height: 50px;
            background-color: #fff;
            position: absolute;
            top: 0%;
            left: -10%;
          }
          p{
            transform: scale(0.8) translateY(-6px);
            &::after{
              display: none;
            }
          }
        }
      }
    }
  }
}